import React from 'react';
import { Flag, Bomb } from 'lucide-react';
import { Cell as CellType } from '../types/game';

interface CellProps {
  cell: CellType;
  onReveal: (row: number, col: number) => void;
  onFlag: (row: number, col: number) => void;
}

export const Cell: React.FC<CellProps> = ({ cell, onReveal, onFlag }) => {
  const handleClick = (e: React.MouseEvent | React.TouchEvent) => {
    e.preventDefault();
    if (e.type === 'contextmenu' || (e.type === 'touchstart' && e.nativeEvent instanceof TouchEvent && e.nativeEvent.touches.length === 2)) {
      onFlag(cell.row, cell.col);
    } else if (e.type === 'click' || e.type === 'touchend') {
      onReveal(cell.row, cell.col);
    }
  };

  const getCellContent = () => {
    if (cell.isFlagged) return <Flag className="w-4 h-4 text-red-500" />;
    if (!cell.isRevealed) return null;
    if (cell.isMine) return <Bomb className="w-4 h-4" />;
    if (cell.neighborMines === 0) return null;
    return <span className="font-bold">{cell.neighborMines}</span>;
  };

  const getCellClass = () => {
    let className = 'w-8 h-8 flex items-center justify-center border border-gray-400 select-none touch-none ';
    if (!cell.isRevealed) {
      className += 'bg-gray-200 hover:bg-gray-300 cursor-pointer active:bg-gray-400';
    } else {
      className += 'bg-white';
    }
    return className;
  };

  return (
    <div
      className={getCellClass()}
      onClick={handleClick}
      onContextMenu={handleClick}
      onTouchStart={handleClick}
      onTouchEnd={handleClick}
    >
      {getCellContent()}
    </div>
  );
};